<template>
  <div>
    <div class="mui-pages" style="background-color: #fff;">
      <header class="mui-bar mui-bar-nav">
        <div class="header-common-title flex-justify-start">
          <a @click="fn.back()" href="javascript:void(0)"><img class="back-btn" src="../../../../static/images/back.png"></a>
          <div class="header-search flex-center">信息详情</div>
          <a @click="editFlag=!editFlag" v-if="roleType" href="javascript:void(0)"><img class="back-btn" src="../../../../static/images/more.png"></a>
        </div>
      </header>
      <div class="mui-page-content">
        <div class="mui-scroll-wrapper">
          <div class="mui-scroll work-message-lists">
            <h4>{{affairsData.title}}</h4>
            <div class="organization-lists-time">
              {{affairsData.createTime}} {{affairsData.publisherName}}&nbsp;{{affairsData.sourceOfPublication}}&nbsp;阅读：{{affairsData.readingVolume}}
            </div>
            <p class="news-world-details" v-html="affairsData.content"></p>
            <h5 class="mine-lists-title">信息附件：<span class="mine-lists-tips">下载（{{affairsData.downloads}}）</span></h5>
            <div class="text-center no-data" v-if="!affairsData.attachmentList || affairsData.attachmentList.length===0">
              <img src="../../../../static/images/no_data.png" alt="">
              <p>暂无数据</p>
            </div>
            <ul class="list-item mui-content-padded flex-justify-start" v-if="affairsData.attachmentList">
              <li class="enclosure-upload" v-for="(data,index) in getFilePath(affairsData.attachmentList)" :key="data.fileId">
                <img v-if="isImage(data.fileName)" class="enclosure-upload-file" :src="data.url" @click="showImagePreview(data.url)" />
                <img v-if="!isImage(data.fileName)" class="enclosure-upload-file" src="../../../../static/images/up_document.png"  @click="downLoadFile(data)" />
                <p class="mui-ellipsis">{{data.fileName}}</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!--右上角弹出菜单-->
    <div id="moreBtn" class="mui-popover meeting-popover mui-active" v-if="editFlag"  style="display: block; top: 47.6px; left: 286px;opacity: 1;">
      <div class="mui-popover-arrow" style="left:52px"></div>
      <div v-if="canEdit" class="mine-lists-title popover-edit" @click="edit">
        <p style="font-size: 16px;">编辑信息</p>
      </div>
      <div v-if="canDelete" class="work-red" @click="deleteItem">
        <p class="work-red">删除信息</p>
      </div>
    </div>
    <div @click="editFlag=!editFlag" v-if="editFlag"  class="mui-backdrop mui-active" style="display: block;"></div>
  </div>
</template>
<script>
  import footerbar from '../common/footerbar.vue'
  import tools from '@/utils/tools'
  import api from '@/common/config/api'
  import loginService from '@/service/loginService'
  export default {
    components: {
      footerbar
    },
    name: '',
    data () {
      return {
        fn: tools,
        affairsData: {},
        editFlag: false,
        roleType: true,
        canEdit: false,
        canDelete: false
      }
    },
    created () {
      this.affairsData = this.$store.state.affairsData
      if (this.affairsData.modifyAuthority === "true") {
        this.canEdit = true
      } else {
        this.canEdit = false
      }
      if (this.affairsData.deletePermission === "true") {
        this.canDelete = true
      } else {
        this.canDelete = false
      }
      if (this.affairsData.modifyAuthority !== "true" && this.affairsData.deletePermission !== "true") {
        this.roleType = false
      } else {
        this.roleType = true
      }
    },
    methods: {
      getFilePath (arr) {
        arr.map((v) => {
          v.url = api.downLoadFile + v.fileId
          return v
        })
        return arr
      },
      isImage (fileName) {
        let arrExt = fileName.split('.')
        return 'PNG,JPG,JPEG,BMP,GIF'.split(',').indexOf(arrExt[arrExt.length - 1].toUpperCase()) > -1
      },
      edit () {
        this.editFlag = false
        this.$store.state.editAffairsData = this.affairsData
        this.$router.push({name: 'affairsAdd'})
      },
      delPartyAffairsById (_this, id) {
        loginService.delPartyAffairsById(id).then((res) => {
          if (res.code === 200) {
            _this.fn.back()
          }
          tools.tip(res.message)
        })
      },
      deleteItem () {
        this.editFlag = false
        let _this = this
        this.$createDialog({
          type: 'confirm',
          // icon: 'cubeic-alert',
          title: '温馨提示',
          content: '确定删除记录吗？',
          confirmBtn: {
            text: '确定删除',
            active: true,
            disabled: false,
            href: 'javascript:;'
          },
          cancelBtn: {
            text: '取消删除',
            active: false,
            disabled: false,
            href: 'javascript:;'
          },
          onConfirm: () => {
            _this.delPartyAffairsById(_this, this.affairsData.id)
          },
          onCancel: () => {
          }
        }).show()
      },
      showImagePreview (url) {
        if (url.length < 1) {
          return false
        }
        let imgs = [url]
        this.$createImagePreview({
          initialIndex: 0,
          imgs: imgs
        }, (h) => {
          return h('div', {
            class: {
              'image-preview-custom-header': false
            },
            slot: 'header'
          }, '')
        }).show()
      },
      downLoadFile (item) {
        console.log("item={}", item)
        if (window.android && window.android.downloadFile) {
          window.android.downloadFile(item.url, item.fileName)
        }
      }
    }
  }
</script>
